<template>
  <div class="admin-dashboard">
    <div class="dashboard-header">
      <h1>管理员控制台</h1>
      <p>欢迎回来，{{ authStore.userAccount }}！</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-title">总用户数</div>
              <div class="stats-value">{{ stats.totalUsers }}</div>
              <div class="stats-change">
                <span :class="stats.userChange >= 0 ? 'positive' : 'negative'">
                  {{ stats.userChange >= 0 ? '+' : '' }}{{ stats.userChange }}%
                </span>
                较上月
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-icon">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-title">管理员数</div>
              <div class="stats-value">{{ stats.totalAdmins }}</div>
              <div class="stats-change">
                <span :class="stats.adminChange >= 0 ? 'positive' : 'negative'">
                  {{ stats.adminChange >= 0 ? '+' : '' }}{{ stats.adminChange }}%
                </span>
                较上月
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-icon">
              <el-icon><Message /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-title">消息总数</div>
              <div class="stats-value">{{ stats.totalMessages }}</div>
              <div class="stats-change">
                <span :class="stats.messageChange >= 0 ? 'positive' : 'negative'">
                  {{ stats.messageChange >= 0 ? '+' : '' }}{{ stats.messageChange }}%
                </span>
                较上月
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-icon">
              <el-icon><Setting /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-title">系统状态</div>
              <div class="stats-value status-value">
                <el-tag :type="stats.systemStatus === 'normal' ? 'success' : 'danger'">
                  {{ stats.systemStatus === 'normal' ? '正常' : '异常' }}
                </el-tag>
              </div>
              <div class="stats-change">
                最后更新: {{ stats.lastUpdate }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 快捷操作 -->
    <div class="quick-actions">
      <h2>快捷操作</h2>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-card class="action-card" @click="navigateTo('/admin/users')">
            <div class="action-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="action-title">用户管理</div>
          </el-card>
        </el-col>
        
        <el-col :span="4">
          <el-card class="action-card" @click="navigateTo('/admin/roles')">
            <div class="action-icon">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="action-title">角色管理</div>
          </el-card>
        </el-col>
        
        <el-col :span="4">
          <el-card class="action-card" @click="navigateTo('/admin/permissions')">
            <div class="action-icon">
              <el-icon><Setting /></el-icon>
            </div>
            <div class="action-title">权限管理</div>
          </el-card>
        </el-col>
        
        <el-col :span="4">
          <el-card class="action-card" @click="navigateTo('/admin/system')">
            <div class="action-icon">
              <el-icon><Tools /></el-icon>
            </div>
            <div class="action-title">系统设置</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近活动 -->
    <div class="recent-activities">
      <h2>最近活动</h2>
      <el-card>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in recentActivities"
            :key="index"
            :timestamp="activity.time"
            :type="activity.type"
          >
            <div class="activity-content">
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-desc">{{ activity.description }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义页面布局
definePageMeta({
  layout: 'admin'
})

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  UserFilled,
  Message,
  Setting,
  Tools
} from '@element-plus/icons-vue'
import { useAuthStore } from '../../stores/auth'

// 路由
const router = useRouter()

// 认证状态管理
const authStore = useAuthStore()

// 统计数据
const stats = ref({
  totalUsers: 0,
  userChange: 0,
  totalAdmins: 0,
  adminChange: 0,
  totalMessages: 0,
  messageChange: 0,
  systemStatus: 'normal',
  lastUpdate: ''
})

// 最近活动
const recentActivities = ref([
  {
    time: '2024-01-15 10:30:00',
    type: 'success',
    title: '用户登录',
    description: '管理员 admin 成功登录系统'
  },
  {
    time: '2024-01-15 09:15:00',
    type: 'warning',
    title: '系统更新',
    description: '系统版本更新至 v1.2.0'
  },
  {
    time: '2024-01-14 16:45:00',
    type: 'info',
    title: '数据备份',
    description: '系统数据备份完成'
  },
  {
    time: '2024-01-14 14:20:00',
    type: 'success',
    title: '用户创建',
    description: '新用户 testuser 创建成功'
  },
  {
    time: '2024-01-13 11:00:00',
    type: 'danger',
    title: '安全警告',
    description: '检测到异常登录尝试'
  }
])

// 页面加载时获取统计数据
onMounted(async () => {
  await loadStats()
})

// 加载统计数据
const loadStats = async () => {
  try {
    // 模拟数据，实际应该从后端API获取
    stats.value = {
      totalUsers: 1234,
      userChange: 12.5,
      totalAdmins: 8,
      adminChange: 0,
      totalMessages: 56789,
      messageChange: 8.3,
      systemStatus: 'normal',
      lastUpdate: new Date().toLocaleString()
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 导航到指定页面
const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.admin-dashboard {
  padding: 0;
}

.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-header h1 {
  font-size: 28px;
  color: #303133;
  margin: 0 0 10px 0;
}

.dashboard-header p {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

/* 统计卡片 */
.stats-cards {
  margin-bottom: 30px;
}

.stats-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-5px);
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.stats-icon :deep(.el-icon) {
  font-size: 30px;
  color: #fff;
}

.stats-content {
  text-align: center;
}

.stats-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.stats-change {
  font-size: 12px;
  color: #909399;
}

.stats-change .positive {
  color: #67c23a;
}

.stats-change .negative {
  color: #f56c6c;
}

.status-value {
  font-size: 20px;
}

/* 快捷操作 */
.quick-actions {
  margin-bottom: 30px;
}

.quick-actions h2 {
  font-size: 20px;
  color: #303133;
  margin: 0 0 20px 0;
}

.action-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  padding: 20px;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.action-icon :deep(.el-icon) {
  font-size: 24px;
  color: #fff;
}

.action-title {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

/* 最近活动 */
.recent-activities h2 {
  font-size: 20px;
  color: #303133;
  margin: 0 0 20px 0;
}

.activity-content {
  padding: 10px 0;
}

.activity-title {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 5px;
}

.activity-desc {
  font-size: 12px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-cards .el-col {
    margin-bottom: 20px;
  }
  
  .quick-actions .el-col {
    margin-bottom: 20px;
  }
}
</style>